@extends('backend::layout')
@section('title',$page_title)
@push('styles')
    <link href="{{asset(config('view.plugin').'/layui/layui_ext/dtree/font/dtreefont.css')}}" rel="stylesheet">
    <link href="{{asset(config('view.plugin').'/layui/layui_ext/dtree/dtree.css')}}" rel="stylesheet">
@endpush
@section('content')
    @component('backend::component.tpl_frame')
        @slot('page_title') {{$page_title}} @endslot
        @slot('tools_btn')
            <a href="{{route('b_ShopCategory_create')}}"
               class="btn btn-primary btn-sm"
            >
                <i class="hcl hcl-page-add"></i>&nbsp;添加分类
            </a>
        @endslot
        @slot('body_content')
            <div id="toolbarDiv" style="position: relative">
                <ul id="actionsTree" data-content="{{$treeList}}" data-id="0"> </ul>
            </div>
        @endslot
    @endcomponent
@endsection
@push('scripts')
    <script>
        layui.use(['element','layer', 'dtree'], function(){
            var layer = layui.layer,
                dtree = layui.dtree,
                $ = layui.$;
            var data = $('#actionsTree').data('content');
            if(data.length>0){
                dtree.render({
                    elem: "#actionsTree",  //绑定元素
                    toolbar:true,
                    dot:false,
                    initLevel:'5',
                    toolbarScroll:"#toolbarDiv", //划重点，必须配置，属性含义请参考文档
                    toolbarLoad: "node",  // 表示工具栏加载的节点，  可选的值还有：noleaf
                    toolbarShow:["delete"],
                    toolbarStyle: {
                        title: "分类"
                    },
                    toolbarWay: "follow",
                    toolbarExt:[{
                        toolbarId: "testEdit",
                        icon:"dtree-icon-bianji",
                        title:"编辑分类",
                        handler: function(node,$div){
                            var nodeInfo = JSON.parse(node.basicData);
                            layer.open({
                                type:2,
                                title:node.context,
                                area:['80%','80%'],
                                content:nodeInfo.editUrl
                            })
                        }
                    }, {
                        toolbarId: "switchId",
                        icon:"dtree-icon-jian1",
                        title:"启用/禁用",
                        handler: function(node,$div){
                            var nodeInfo = JSON.parse(node.basicData);
                            var load = layer.load(2);
                            $.get(nodeInfo.switchUrl).done(function (response) {
                                if(response.status){
                                    layer.msg(response.msg,{icon:6});
                                    setTimeout(function () {
                                        window.location.href = response.url;
                                    },1000);
                                }else{
                                    layer.msg('操作失败',{icon:5});
                                }
                            }).fail(function () {
                                layer.msg('操作失败',{icon:5});
                            }).always(function () {
                                layer.close(load);
                            });
                        }
                    }],
                    toolbarFun: {
                        editTreeNode: function(treeNode){

                        },
                        delTreeNode: function(treeNode){
                            var nodeInfo = JSON.parse(treeNode.basicData);
                            var load = layer.load(2);
                            $.get(nodeInfo.deleteUrl).done(function (response) {
                                if(response.status){
                                    layer.msg(response.msg,{icon:6});
                                    setTimeout(function () {
                                        window.location.href = response.url;
                                    },1000);
                                }else{
                                    layer.msg('删除失败',{icon:5});
                                }
                            }).fail(function () {
                                layer.msg('删除失败',{icon:5});
                            }).always(function () {
                                layer.close(load);
                            });
                        }
                    },
                    data:data
                });

                //单击节点 监听事件
                dtree.on("node('actionsTree')" ,function(param){

                });
            }
        });
    </script>
@endpush